<template>
  <h1>{{ msg }}</h1>
  <div>{{ count }}</div>
  <button @click="addCount">count++</button>

  <hr>
  <div> {{ age }} </div>
  <button @click="changeAge">age++</button>
  <button @click="getAge">getAge</button>
</template>
<script>
  import {ref} from 'vue';
  export default {
    data(){
      return {
        msg:'hello vue3',
        count:0
      }
    },
    methods:{
      addCount(){
        this.count++
      },
      getAge(){
        console.log("this.age===>",this.age);
      }
    },
    setup(props,context){
      // setup 函数中声明的 变量 和 函数 必须返回才能使用
      // setup 函数中声明的 变量 和 函数 在其他选项中可以使用 method computed ...
      // setup 函数中 this 是 undefined
      // setup 函数中 使用不了 data 中声明的数据 已经其他选项中的内容
      const age = ref(18);
      // console.log("this===>",this);
      // console.log("count===>",this.count);
      // console.log("count==>",count);
      console.log("props==>",props);
      console.log("context==>",context);
      const changeAge = ()=>{
        age.value++
        console.log("age=======>",age);
        console.log("age===>",age.value);
      }
      return {
        age,
        changeAge
      }
    }
  }
</script>
<style></style>